<template>
  <el-select ref="compRef" v-model="value" v-bind="{ ...$props }">
    <template v-for="(_slot, slotName) in $slots" #[slotName]="slotProps">
      <slot :name="slotName" :key="slotName" v-bind="slotProps"></slot>
    </template>
  </el-select>
</template>
<script setup lang="ts">
import { ExtractPropTypes, ref } from "vue";
import { ElSelect, Placement } from "element-plus";
import { SelectProps } from "element-plus/es/components/select/src/select";

type Props = Partial<ExtractPropTypes<typeof SelectProps>>;

withDefaults(defineProps<Props>(), {
  multiple: false,
  disabled: false,
  valueKey: "value",
  multipleLimit: 0,
  effect: "light",
  size: "default",
  autocomplete: "off",
  reserveKeyword: true,
  teleported: true,
  persistent: true,
  tagType: "info",
  tagEffect: "light",
  validateEvent: true,
  offset: 8,
  showArrow: true,
  placement: "bottom-start",
  fallbackPlacements: () =>
    ["bottom-start", "top-start", "right", "left"] as Placement[],
  maxCollapseTags: 1,
});

const value = defineModel();

const compRef = ref();

defineExpose({
  // @ts-ignore
  instance: compRef,
});
</script>
<style lang="scss">
// 这里统一按照UI修改基础组件的样式
.el-select {
  --el-select-font-size: 12px;
}

.el-select__wrapper {
  min-height: 30px;
  padding: 3px 12px;
  font-size: 12px;

  &.is-focused {
    box-shadow: 0 0 0 1px var(--el-border-color) inset;
  }
}
</style>
